<template>
	<view class="content">

		<view class="top">
			<view class="statusBarHeight">
			</view>

			<view class="address" @click="map">
				<block v-if="formatted_address">{{city||'暂无'}},{{formatted_address||'暂无'}}></block>
				<block v-else>点击定位 <u-icon name="map"></u-icon>
				</block>
			</view>

			<view class="hint" v-if="hintShow" @click="escHint">
				点击<u-icon name="more-dot-fill" color="#fff" style="margin: 0 10upx;"></u-icon>添加至我的小程序,方便下次进入呦
				<view class="triangle">

				</view>
			</view>

			<view class="search">
				<u-search v-model="keyword" height="60" placeholder-color="#cccccc" bg-color="rgb(255,255,255)" placeholder="请输入学校名称" shape="square" search-icon-color="#999999"
					actionStyle="{color:red}" @custom="search" @search="search" :actionStyle="{backgroundImage: 'linear-gradient(180deg, #fea278 0%, #fd3d5d 100%)',color:'#ffffff'}">
				</u-search>
			</view>
		</view>
		<view class="card_top">

			<u-swiper :list="list" @click="clickSwiper()" bg-color="#fff" effect3d name="pic"></u-swiper>

			<view class="classify">
				<view class="classifyItem" v-for="(item ,index) in classifyList" :key="index"
					@click="classNav(item.id)">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="title">
				课程推荐
			</view>
			<view class="school" v-for="(item ,index) in courseList" :key="index">
				<view class="school_synopsis" @click="navRoute(item.id)">
					<view class="_img">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="">
							<view class="name">
								{{item.user||'暂未设置机构名'}}
							</view>
							<view v-if="item.juli" style="text-align: right;width: 30%;">
								距你{{item.juli>1000?item.juli/1000:item.juli}}{{item.juli>1000?'km':'m'}}
							</view>
						</view>
						<view class="type" v-if="item.class_title[0]">
							<text v-for="(items ,index) in item.class_title" :key="index">{{items}}</text>

						</view>
						<view class="">
							<u-icon name="map-fill" color="#a7a7a7" size="26"></u-icon>
							{{item.add||'暂无地址信息'}}
						</view>
					</view>
				</view>
				<view class="course" v-if="item.coursesClone.length">
					<view class="" :style="{maxHeight:item.unfold?'1900rpx':'120rpx'}">
						<u-time-line class="time_line">
							<u-time-line-item nodeTop="2" v-for="(items, Xindex) in item.coursesClone" :key="Xindex"
								class="time_line_item">

								<template v-slot:content>
									<view class="courseItem" @click="navcluster(items.id)">
										<view class="">
											{{items.title}}
										</view>
										<view class="">
											￥{{items.price_a!=0&&items.price_b!=0?(items.price_a>items.price_b?items.price_b:items.price_a):(items.price_a==0&&items.price_a==0?items.price:items.price_a==0?items.price_b:items.price_a)}}
										</view>
									</view>
								</template>
							</u-time-line-item>

						</u-time-line>
					</view>

					<view class="more" @click="gengduo(index)" v-if="item.courses.length>3&&!item.unfold">
						<block v-if="!item.unfold">查看更多课程 <u-icon name="arrow-down" size="28"></u-icon>
						</block>
						<block v-else>收起 <u-icon name="arrow" size="28"></u-icon>
						</block>
					</view>
				</view>
			</view>

		</view>
		<Loading />
	</view>
</template>

<script>
	var BMap = require('@/libs/bmap-wx.js');
	let bmap;
	export default {
		data() {
			return {
				keyword: '',
				hintShow: false,
				location: {
					lng: '',
					lat: ''
				},
				longitude: '',
				latitude: '',
				city: '',
				formatted_address: '',
				list: [],
				courseList: [],
				classifyList: [],
				networkCode: true,
				page: 1
			}
		},
		onLoad() {
			let that = this
			this.$myRuquest('home/index/banner').then(res => {
				if (res.code == 400) {
					this.list = res.data
				}
			})

			this.$myRuquest('home/index/home_class').then(res => {
				if (res.code == 400) {
					this.classifyList = res.data
					this.classifyList.push({
						title: '全部',
						pic: '/static/allClass.png'
					})
				}
			})
			// 新建百度地图对象 
			bmap = new BMap.BMapWX({
				ak: '7yjBs52ZHNBXCmMQV1uzdWBBZCPF8UUS'
			});
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.longitude = res.longitude
					that.latitude = res.latitude
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.loadCity(res.longitude, res.latitude)

				},
				complete: function() {
					that.complete()
				}

			});
		},
		onShow() {
			this.hintShow = uni.getStorageSync("hintShow")
		},
		methods: {
			onShareAppMessage:function(e){
				return {
					title:'减压又有趣，打造属于孩子的时尚舞台！'
				}
			},
			onShareTimeline:function(e){
				return {
					title:'减压又有趣，打造属于孩子的时尚舞台！'
				}
			},
			escHint() {
				this.hintShow = false
				uni.setStorageSync('hintShow', false);
			},
			complete() {
				this.$myRuquest('home/index/merchants_list', {
					type: 1,
					num: 1,
					longitude: this.longitude,
					latitude: this.latitude,
				}).then(res => {
					if (res.code == 400) {
						res.data[0].class_title = res.data[0].class_title.split(',')
						if (res.data[0].courses.length > 2) {
							res.data[0].coursesClone = res.data[0].courses.slice(0, 2)
						} else {
							res.data[0].coursesClone = res.data[0].courses
						}
						this.courseList.push(res.data[0])
						this.newCourse()
					}
				})
			},
			search() {
				if (!this.keyword) return;
				uni.navigateTo({
					url: `../searchList/searchList?keyword=${this.keyword}`
				});
			},
			clickSwiper(index) {
				let id = this.list[index].url
				if (this.list[index].show_zt == 1) return;
				if (this.list[index].show_zt == 2) return this.navRoute(id);
				if (this.list[index].show_zt == 3) return this.navcluster(id);
			},
			classNav(id) {
				if (!id) {
					uni.navigateTo({
						url: `../classifyList/classifyList`
					});
				} else {
					uni.navigateTo({
						url: `../searchList/searchList?id=${id}`
					});
				}

			},
			newCourse() {


				if (!this.networkCode) return uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				});
				let data = {
					type: 0,
					page: this.page,
					num: 5,
					longitude: this.longitude,
					latitude: this.latitude,
				}
				this.$myRuquest('home/index/merchants_list', data).then(res => {
					if (res.code == 400) {
						if (res.data.length != 5) this.networkCode = false
						this.page++
						let list = res.data.filter(item => {
							item.class_title = item.class_title.split(',')
							item.juli = parseInt(item.juli)
							if (item.courses.length > 2) {
								item.coursesClone = item.courses.slice(0, 2)
							} else {
								item.coursesClone = item.courses
							}
							if (this.courseList[0]) {
								return item.id != this.courseList[0].id
							} else {
								return true
							}

						})
						this.courseList.push(...list)
					}
				})
			},
			gengduo(index) {
				this.courseList[index].coursesClone = this.courseList[index].courses

				this.courseList[index].unfold = true
			},
			loadCity(lng, lat) {
				var that = this
				that.location = {
					lng,
					lat
				}
				wx.setStorageSync("location", that.location);
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: 'cfb3c2d54458e7f0180cdd53278dd44c',
						location: lng + "," + lat,
						extensions: "all",
						s: "rsx",
						sdkversion: "sdkversion",
						logversion: "logversion"
					},
					success: function(res) {
						that.city = res.data.regeocode.addressComponent.city
						that.formatted_address = res.data.regeocode.formatted_address.split(that.city)[1];
						wx.setStorageSync("city", that.city);
					},
					fail: function(res) {
						console.log('获取地理位置失败')
					}
				})
			},
			map() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.courseList = []
						that.page = 1
						that.networkCode = true
						that.loadCity(res.longitude, res.latitude)
						that.complete()
					},
					fail: function(err) {
						// uni.getLocation({
						// 	type: 'wgs84',
						// 	success: function(res) {
						// 		console.log('当前位置的经度：' + res.longitude);
						// 		console.log('当前位置的纬度：' + res.latitude);
						// 		that.loadCity(res.longitude, res.latitude)

						// 	},
						// 	fail:function(err){
						// 		console.log(err)
						// 	}
						// });
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								console.log(statu);
								if (!statu['scope.userLocation']) {
									console.log(123);
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											console.log(tip);
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														console.log(data)
														if (data.authSetting[
																"scope.userLocation"
															] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															console.log('ok')

															uni.getLocation({
																type: 'wgs84',
																success: function(
																	res
																) {
																	console
																		.log(
																			'当前位置的经度：' +
																			res
																			.longitude
																		);
																	console
																		.log(
																			'当前位置的纬度：' +
																			res
																			.latitude
																		);
																	that.loadCity(
																		res
																		.longitude,
																		res
																		.latitude
																	)

																},
																fail: function(
																	err
																) {

																}
															});
															//回调 重新打开地图
															that.map()
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})

					}
				});

			},
			// placeName(lng, lat) {
			// 	let that = this

			// 	console.log(that.location)
			// 	// 发起regeocoding检索请求
			// 	bmap.regeocoding({
			// 		location: `${lat},${lng}`,
			// 		success: (res) => {

			// 		}
			// 	});
			// },
			navRoute(id) {
				uni.navigateTo({
					url: `../organizationDetails/organizationDetails?id=${id}`
				});
			},
			navcluster(id) {
				uni.navigateTo({
					url: `../organizationDetails/clusterHelp/clusterHelp?id=${id}`
				});
			},
			onReachBottom() {
				this.newCourse()
			},
			onPullDownRefresh() {
				this.courseList = []
				this.page = 1
				this.networkCode = true
				this.complete()
				setTimeout(() => uni.stopPullDownRefresh(), 2000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #F4F5F7;
		padding-top: 210upx;

		.top {
			// background: linear-gradient(to bottom right, #FFBD83,#FF2F5A);
			background: linear-gradient(to bottom right, rgb(254, 162, 120), rgb(253, 61, 93));
			// background: linear-gradient(to bottom, rgb(255, 196, 1), rgb(255, 222, 113));
			color: #fff;
			padding: 0upx 20upx;
			width: 100vw;
			position: fixed;
			top: 0;
			z-index: 99999;
		}
	}

	.statusBarHeight {
		height: var(--status-bar-height); //这里是状态栏css变量
		width: 100%;

	}

	.hint {
		font-size: 22upx;
		position: fixed;
		top: 160upx;
		right: 70upx;
		background-color: rgba(0, 0, 0, .3);
		padding: 10upx;
		border-radius: 10upx;

		.triangle {
			width: 0;
			height: 0;
			border-left: 10upx solid transparent;
			border-right: 10upx solid transparent;
			border-bottom: 14upx solid rgba(0, 0, 0, .3);
			position: absolute;
			top: -14upx;
			right: 60upx;
		}
	}

	.address {
		padding: 30upx 0;
		max-width: 75%;
		font-size: 30upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.card_top {
		background-color: #fff;
		padding: 20upx 0;
		padding-top: 40upx;
		// margin-top: 210upx;
		margin-bottom: 20upx;
		border-radius: 12upx;
	}

	.card {
		background-color: #fff;
		padding: 20upx;
		// margin-bottom: 20upx;
		border-radius: 12upx;

		.title {
			font-weight: 900;
		}
	}

	.search {
		margin-bottom: 16upx;
	}

	.classify {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		// margin: 0 20upx;
		margin-top: 20upx;

		.classifyItem {
			width: 20%;
			font-size: 26upx;
		
			color: #333333;
			text-align: center;

			image {
				width: 100upx;
				height: 100upx;
					margin: 20upx 2%;
				background-image: none;
			}
		}
	}

	.school {
		// margin: 20upx 0;
		background-color: #fff;
		padding: 0 10upx;
		margin-top: 10upx;
		margin-bottom: 20upx;
		// border-radius: 12upx;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #f0f0f0 ;

		.school_synopsis {
			display: flex;

			._img {
				width: 136upx;
				height: 136upx;
				margin-right: 30upx;
				border-radius: 12upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: calc(100% - 160upx);

				view:nth-child(1) {
					display: flex;
					font-size: 20upx;
					color: #666666;

					.name {
						width: 70%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28upx;
						color: #000;
						font-weight: 900;
						font-family: PingFangSC-Bold;
					}
				}

				view:nth-child(3) {
					color: #666666;
					font-size: 24upx;
				}

				.type {
					margin: 15upx 0;

					text {
						border: 2upx solid #FF515E;
						color: #FF515E;
						padding: 0 8upx;
						margin: 5upx;
						border-radius: 10upx;
						font-size: 22upx;
					}

				}

			}
		}

		.course {

			// transition: all 2s;
			padding-top: 40upx;
			padding-left: 120upx;

			>view {
				padding: 10upx;
				overflow: hidden;
				transition: all 2s;

				.time_line {
					max-height: 200upx;

					.time_line_item {
						.courseItem {
							display: flex;
							height: 40upx;
							line-height: 20upx;

							view:nth-child(1) {

								min-width: 400upx;
							}

							view:nth-child(2) {

								color: #FF515E;
								font-weight: 900;
							}

						}

					}


					.time_line_item:nth-last-child(1) {
						.courseItem {
							height: 20upx;
						}

					}
				}


			}

			.more {
				margin-top: 40upx;
				text-align: center;
				font-size: 26upx;
				color: #8f8f8f;
				border-radius: 8upx;
				background-color: #F4F5F7;
				padding: 10upx 0;
			}
		}

	}
</style>
